第六章 樣式碼置放與重構策略

從特定度低到特定度高之樣式的順序來組織CSS

CSS樣式依據特定度與被引用的順序來套用，按照被套用的順序來組織CSS也是很合理的

1. 正規化樣式(normalizing styles)
2. 基底樣式(base styles)
3. 組件及其容器使用的樣式
4. 結構樣式(structurl style)
5. 工具樣式(utility styles)
6. 瀏覽器特定樣式(如果一定需要的話)

CSS的順序讓宣告區塊中的選擇器有較高的特定度，較複雜的選擇器也會由己引入較通用的選擇器建構而出

正規化樣式

正規化樣式被用來作為起點將各瀏覽器不一致的地方排除。
將不一致之處排除後，後續的樣式即可從這些正規化樣式定義出的一致屬性中獲益。

基底樣式

基底樣式定義了網站中所有元素的起始樣式。
像空間安排(margin & padding)、字型大小與族系(families)，還有其他不太需要經常複寫的主要樣式成份應該要寫在基底樣式中。

組件及其容器使用的樣式

組件樣式以基底樣式為基礎，提供具視覺意涵的樣式，讓使用者更容易與網站互動。
這些樣式應該要能適用於全站的主要使用案例上，樣式上的任何調整應該委派給父層。

結構化樣式

結構化樣式包含組件與其容器。
他們用來創建網頁的版面與適用於一般情況的尺寸。

工具樣式

工具樣式應該是特定度最高的樣式，就像其他單一用途的樣式那樣。
由JavaScript所套用的，會用到!important的類別應該要寫在這裡。

瀏覽器特定樣式

若你還是得要支援傳統的瀏覽器，特別實作出的樣式應該要寫在這裡。
這些樣式可能也會用到!important，也可能會由網站依據條件而引用。
通常這些樣式會拖泥帶水，不需要的時候記得要把他們都刪掉。

以上是各種不同類型樣式之用途的複習，當你看到這些樣式的用途時，也要注意他們與其他樣式搭配的方法。

多檔還是單一大檔？

我們可以用幾種不同的方式來組織樣式碼，比方說，可用幾個檔案或一個大檔案來放置這些樣式碼。
開發者是否能很輕鬆地在預期的位置找到要用的樣式碼至關重要，不過，網站是否能很快速地為使用者載入也是非常重要的。

供應CSS

造訪內含CSS檔(相對於透過行內CSS來指定樣式)的網站時，瀏覽器會要求這些檔案下載後進行解析並套用適當的樣式。
為了能迅速下載，越快載入網站這些檔案就越小。

併接(concatenation) 是將幾個檔案併成一個的操作。
這是一種透過減少需下載的檔案數來降低頁面下載時間的常用技術。

範例6-1 範例檔1

/**
* 本檔內含基本標頭元素的樣式
*/
h1{
    color: #333;
    font-size: 24px;
    margin-bottom: 6px;
    margin-left: 12px;
    margin-right: 6px;
    margin-top: 12px;
}

範例6-2 範例檔2

/**
* 本檔內含列表元素的樣式
*/
ul{
    list-style-type: none;
    padding-bottom: 12px;
    padding-left: 0;
    padding-top: 12px;
    padding-right: 0;
}

範例6-3 併接而成的CSS檔

/**
* 本檔內含基本標頭元素的樣式
*/
h1{
    color: #333;
    font-size: 24px;
    margin-bottom: 6px;
    margin-left: 12px;
    margin-right: 6px;
    margin-top: 12px;
}
/**
* 本檔內含列表元素的樣式
*/
ul{
    list-style-type: none;
    padding-bottom: 12px;
    padding-left: 0;
    padding-top: 12px;
    padding-right: 0;
}

併接的功能強大，能將大的CSS檔拆成較小的檔案(小檔可再被重建成大檔，已透過減少使用者需要下載的檔案數，降低頁面載入時間)。
將樣式碼分散在幾個檔案，可以讓類似的規則集合理地群組再一起，要找到特定部分的樣式碼也會變得比較容易。

縮整(minification) 是移除檔案不需要的空白、註解與新行碼(newlines)的操作
因為空白和註解會讓CSS檔變大，最終都會讓使用者下載過去。
縮整並不會影響到樣式碼的行為。

範例6-4 縮整後的CSS檔

h1{color: #333;font-size: 24px;margin-bottom: 6px;margin-left: 12px;margin-right: 6px;margin-top: 12px;}
ul{list-style-type: none;padding-bottom: 12px;padding-left: 0;padding-top: 12px;padding-right: 0;}

重構前檢核CSS

評估準則：

• 所用屬性列表
• 使用特定屬性之宣告區塊列表
• 所用之不同顏色的數量
• 所用之最高與最低的特定度
• 具最高與最低特定度的選擇器
• 選擇器的長度

這邊推薦一個Google Chrome瀏覽器的外掛工具『CSS Dig』
只要到Chrome的擴充功能裡面搜尋CSS Dig就能使用
在網站內按下CSS Dig的圖示就可以使用，他能夠幫你分析網頁內可用的CSS
是一套能幫你將樣式碼整理好的實用工具！

重構策略

在探討進行CSS重構的策略之前，你應該盡可能只在常常需要被檢核或釋出的，小且可控制的區段(chunks)上進行重構。若一次重構太多樣式碼並將之釋出，會因為一下子改太多碼而提高產生回歸的風險。
在大區段上進行重構也會拖延到新功能的編寫，若在原始碼控制程序中進行複雜的合併，沒有執行好也會產生回歸。
若在一個小區段中進行樣式碼的重構，會變動且產生回歸的地方相對就比較少，測試起來也會比較容易。

要在一個已經寫有不少樣式的專案中套用這個技巧可能會增加許多負擔。
最終的目的是要運用這些想法，使所產生的CSS碼庫(codebase)能具有正規化、基底、組件、容器、結構與工具等樣式。

一致地架構規則集

如果規則集有一致的架構，開發工作就會變得比較容易。
如何架構取決於你要將宣告區塊寫成什麼樣子、宣告順序要如何安排
修改現有的CSS或編寫新的CSS時，就可以讓規則集更一致並且降低出錯的風險。

刪除廢碼

CSS碼庫不要存有廢碼，這點很重要！
廢碼(dead code)指的是有寫但沒有用到的碼。
廢碼可能會有這幾種形式：未用宣告區塊、重複宣告區塊以及重複宣告

未用宣告區塊(unused declaration blocks) 是有寫但絕不會被用到的宣告區塊。
這種區塊很常見，因為這是人為因素：編碼時沒有明確方向或者有許多地方常變動，要追蹤樣式碼是否有被使用到並不容易。

重複宣告區塊(duplicate declaration blocks) 是因與其他現有宣告完全相同而變成不需要重複的宣告區塊。這個區塊通常是由複製並貼上樣式碼所造成。

h1{
    font-size: 28px;
    font-weight: 900;
}
/* 重複宣告區塊 */
h1{
    font-size: 28px;
    font-weight: 900;
}

重複宣告(duplicate declarations) 是在同一個宣告區塊中與其他宣告完全相同的宣告，在不同的規則集中常存在重複宣告。在同一個規則集中盡量避免出現重複的宣告，因為只有最後那一個宣告才會被套用。

h1{
    font-size: 28px;
    font-weight: 900;
    font-weight: 900; /* 重複宣告 */
}

.section-title{
    font-size: 24px;
    /* 這不是重複宣告，因為在不同選擇器的不同宣告區塊中 */
    font-weight: 900;
}

廢碼不好，他會讓碼庫更容易產生混淆，也更難維護。
若碼庫裡有一堆廢碼，檢查起來就會浪費不少時間，CSS還會被傳送到使用者的瀏覽器上，CSS檔中有太多廢碼下載時間就會變長，使用者體驗就會變差(特別是透過慢的網路連網時)。